<template>
  <div class="setting-container">
    <!-- 设置 表单信息 -->
    <el-form
      ref="form"
      :rules="rulesSettingForm"
      :model="settingForm"
      label-position="top"
      :disabled="!isEditMode"
    >
      <h3>网站信息</h3>
      <div class="category-div-container">
        <el-form-item prop="siteTitle" label="网站标题">
          <el-input
            v-model="settingForm.siteTitle"
            placeholder="请输入网站标题"
          ></el-input>
        </el-form-item>
        <el-form-item prop="mail" label="邮箱">
          <el-input
            v-model="settingForm.mail"
            placeholder="请输入邮箱地址"
          ></el-input>
        </el-form-item>
        <el-form-item prop="icp" label="备案号">
          <el-input
            v-model="settingForm.icp"
            placeholder="请输入备案号"
          ></el-input>
        </el-form-item>
      </div>

      <el-divider></el-divider>

      <h3>网站头像</h3>
      <div class="category-div-container">
        <el-form-item>
          <div class="uploadimg-container">
            <UploadImg
              v-model="uploadimg"
              @onload="settingForm.avatar = $event"
            />
          </div>
        </el-form-item>
      </div>

      <el-divider></el-divider>

      <h3>网址图标信息</h3>
      <div class="category-div-container">
        <el-form-item prop="favicon" label="网址图标地址">
          <el-input
            v-model="settingForm.favicon"
            placeholder="请输入网址图标地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="网址图标预览">
          <el-image :src="settingForm.favicon" fit="fit"></el-image>
        </el-form-item>
      </div>

      <el-divider></el-divider>

      <h3>Github 信息</h3>
      <div class="category-div-container">
        <el-form-item prop="githubName" label="github 名称">
          <el-input
            v-model="settingForm.githubName"
            placeholder="请输入github名称"
          ></el-input>
        </el-form-item>

        <el-form-item prop="github" label="github 地址">
          <el-input
            v-model="settingForm.github"
            placeholder="请输入github地址"
          ></el-input>
        </el-form-item>
      </div>

      <el-divider></el-divider>

      <h3>QQ 信息</h3>
      <div class="category-div-container">
        <el-form-item prop="qq" label="QQ 号码">
          <el-input
            v-model="settingForm.qq"
            placeholder="请输入QQ号码"
          ></el-input>
        </el-form-item>

        <el-form-item prop="qqQrCode" label="QQ 二维码图片预览">
          <div class="uploadimg-container">
            <UploadImg
              v-model="qqQrCode"
              @onload="settingForm.qqQrCode = $event"
            />
          </div>
        </el-form-item>
      </div>

      <el-divider></el-divider>

      <h3>微信信息</h3>
      <div class="category-div-container">
        <el-form-item prop="weixin" label="微信号码">
          <el-input
            v-model="settingForm.weixin"
            placeholder="请输入微信号码"
          ></el-input>
        </el-form-item>

        <el-form-item prop="weixinQrCode" label="微信二维码图片预览">
          <div class="uploadimg-container">
            <UploadImg
              v-model="weixinQrCode"
              @onload="settingForm.weixinQrCode = $event"
            />
          </div>
        </el-form-item>
      </div>
    </el-form>

    <el-divider></el-divider>

    <!-- 按钮 -->
    <div>
      <el-button type="info" @click="isEditMode = true" v-if="!isEditMode"
        >进入编辑模式</el-button
      >
      <div v-else>
        <el-button type="info" @click="isEditMode = false">取消</el-button>
        <el-button type="success" @click="handlerSubmitSetting"
          >确认设置</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getGlobSettingAPI, setGlobSettingAPI } from "@/api/setting";
import UploadImg from "@/components/UploadImg";
import { setDevImg } from "@/utils";
export default {
  name: "Setting",
  components: {
    UploadImg,
  },
  data() {
    return {
      isEditMode: false,
      uploadimg: "",
      qqQrCode: "",
      weixinQrCode: "",
      settingForm: {},
      rulesSettingForm: {
        siteTitle: [
          { required: true, message: "网站标题为必填项", trigger: "blur" },
        ],
        mail: [{ required: true, message: "邮箱为必填项", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getGlobSetting();
  },
  methods: {
    async getGlobSetting() {
      const res = await getGlobSettingAPI();
      if (typeof res !== "string") {
        this.uploadimg = setDevImg(res.data.avatar);
        this.qqQrCode = setDevImg(res.data.qqQrCode);
        this.weixinQrCode = setDevImg(res.data.weixinQrCode);
        this.settingForm = res.data;
      } else {
        const { msg } = JSON.parse(res);
        this.$message.error(msg);
      }
    },
    handlerSubmitSetting() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await setGlobSettingAPI(this.settingForm);
          if (typeof res !== "string") {
            this.$message.success("全局信息已设置成功！");
            this.isEditMode = false;
          } else {
            const { msg } = JSON.parse(res);
            this.$message.error(msg);
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.setting-container {
  padding: 10px;
  .category-div-container {
    padding: 0 10px;
  }
}
</style>
